<template>
    <view :style="Theme">
        <uni-nav-bar leftIcon="left" :fixed="true" title="设置" />
        <view class="menu">
            <menuList leftIcon="icon-edit" menuName="修改信息" rightIcon="icon-right" @onClick="navTo('/my/changeInfo')"
                @clickRight="navTo('/my/changeInfo')" />
            <menuList leftIcon="icon-change" menuName="修改密码" rightIcon="icon-right"
                @onClick="navTo('/my/changePassword')" @clickRight="navTo('/my/changePassword')" />
            <menuList leftIcon="icon-purge" menuName="清除缓存" rightIcon="icon-right" @onClick="clearStorage"
                @clickRight="clearStorage" />
            <menuList leftIcon="icon-theme" menuName="主题切换" rightIcon="icon-right" @onClick="showColorModal"
                @clickRight="showColorModal" />
        </view>
        <view class="exitBtn" @click="exitLogin">退出登录</view>

        <!-- 选择颜色模态框 -->
        <Modal title="选择主题" v-model:showModal="themeModal">
            <view class="theme-content">
                <view class="theme-grid">
                    <view v-for="(item,index) in themes" :key="index" class="theme-item"
                        :style="{backgroundColor: getThemeColor(item)}" @click="themeChange(index)">
                        <view class="theme-name">{{item.name}}</view>
                    </view>
                </view>
            </view>
        </Modal>
    </view>
</template>

<script setup>
    const {
        Theme,
        getTheme,
    } = useTheme()
    const { proxy } = getCurrentInstance()
    import menuList from '@/components/menuList/menuList.vue'
    import Modal from '@/components/Modal/Modal.vue'
    import { themeList } from '@/theme/theme.js'

    const getThemeColor = item => {
        const primaryColor = item.value && item.value.find(v => v.name === '--primary-color')
        return primaryColor ? primaryColor.value : '#48b8d0'
    }

    onLoad(() => {})

    onShow(() => {})

    const navTo = path => {
        proxy.sjuNav.navigateTo(path)
    }

    const clearStorage = () => {
        proxy.sjuAlert.showConfirm('是否确认清除数据', () => {
            proxy.sjuLogin.clearAll()
        }, () => {}, '提示')
    }

    const themeModal = ref(false)
    const showColorModal = () => {
        themeModal.value = true
    }

    const themes = ref(themeList)
    const themeChange = index => {
        themeModal.value = false
        useThemeStore().setTheme(themes.value[index])
        getTheme()
    }

    const exitLogin = () => {
        proxy.sjuAlert.showConfirm('是否确认退出登录', () => {
            proxy.sjuLogin.clearAll()
            proxy.sjuNav.switchTab('/tab/index')
        }, () => {}, '提示')
    }
</script>

<style lang="scss">
    .menu {
        width: 100%;
        margin-top: 20rpx;
        background-color: var(--accent-bg-color);
    }

    .exitBtn {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        margin-top: 20rpx;
        background-color: var(--accent-bg-color);
    }

    .theme-content {
        padding: 30rpx;
    }

    .theme-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;
    }

    .theme-item {
        aspect-ratio: 1;
        border-radius: 16rpx;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: relative;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
        }
    }

    .theme-name {
        color: #fff;
        font-size: 24rpx;
        position: relative;
        bottom: 3%;
        z-index: 1;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }
</style>